<template>
  <div class="application-order">
    <x-header>我的申请</x-header>
    <tab bar-active-color="#668599" :line-width="1">
      <tab-item selected @on-item-click="changeState('1')">待成交</tab-item>
      <tab-item @on-item-click="changeState('2')">已成交</tab-item>
      <tab-item @on-item-click="changeState('4')">已支付</tab-item>
      <tab-item @on-item-click="changeState('3')">已确认</tab-item>
    </tab>
    <div v-infinite-scroll="loadMoreOrderList" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <box gap="10px">
        <order-card
          v-for="(item, index) in orderList"
          :key="index"
          @click.native="showOrderInfo(item)">
          <div slot="title">{{item.Brief}}</div>
          <div slot="footer">
            <span>{{item.State|orderStatus}}</span>
            <span>{{item.DateUpdated|hhmm}}</span>
          </div>
        </order-card>
      </box>
    </div>
  </div>
</template>

<script>
import {
  XHeader,
  Tab,
  TabItem,
  Box
} from 'vux'
import {
  getApplicationOrderList
} from '../../api/api'
import OrderCard from '../../components/OrderCard.vue'
export default {
  name: 'applicationOrder',
  components: {
    XHeader,
    Tab,
    TabItem,
    Box,
    OrderCard
  },
  data () {
    return {
      orderList: [],
      loading: false,
      loadCount: -1,
      state: '1'
    }
  },
  mounted () {
    this.getApplicationOrderList()
  },
  methods: {
    getApplicationOrderList () {
      this.$vux.loading.show({
        text: '加载中'
      })
      getApplicationOrderList({
        State: this.state,
        number: 15
      }).then(res => {
        this.$vux.loading.hide()
        if (res.status === 200) {
          this.orderList = res.data
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    changeState (state) {
      this.state = state
      this.getApplicationOrderList()
    },
    loadMoreOrderList () {
      this.loadCount++
      if (this.loadCount > 0) {
        this.loading = true
        // this.getMorePublishOrderList()
        setTimeout(() => {
          this.loading = false
        }, 1500)
      }
    }
  }
}
</script>

<style lang="less">
</style>
